<!--
 * 按钮组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module title="基础使用">
			<view class="buttons">
				<pure-button class="button" text="基础使用"></pure-button>
			</view>
		</app-demo-module>

		<!-- 主题按钮 -->
		<app-demo-module
			title="主题按钮"
			:desc="[
				'设置 theme 属性为主题对应的 css 变量名',
				'如果 theme 值以双中划线开头，则表示是自定义主题色',
				'否则则被认为只 Pure 内置的主题色',
				'提示：设置主题后，文本颜色默认为白色',
			]"
		>
			<view class="buttons">
				<pure-button
					class="button"
					text="内置主题"
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					theme="success"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					theme="danger"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					theme="warning"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					theme="info"
				></pure-button>
				<pure-button
					class="button"
					text="自定义主题-中国红"
					theme="--app-theme-china-red"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 幽灵按钮 -->
		<app-demo-module title="幽灵按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="幽灵按钮"
					ghost
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="幽灵按钮"
					ghost
					theme="success"
				></pure-button>
				<pure-button
					class="button"
					text="幽灵按钮"
					ghost
					theme="danger"
				></pure-button>
				<pure-button
					class="button"
					text="幽灵按钮"
					ghost
					theme="warning"
				></pure-button>
				<pure-button
					class="button"
					text="幽灵按钮"
					ghost
					theme="info"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 镂空按钮 -->
		<app-demo-module title="镂空按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="镂空按钮"
					plain
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="镂空按钮"
					plain
					theme="success"
				></pure-button>
				<pure-button
					class="button"
					text="镂空按钮"
					plain
					theme="danger"
				></pure-button>
				<pure-button
					class="button"
					text="镂空按钮"
					plain
					theme="warning"
				></pure-button>
				<pure-button
					class="button"
					text="镂空按钮"
					plain
					theme="info"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 禁用按钮 -->
		<app-demo-module title="禁用按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="内置主题"
					disabled
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					disabled
					theme="success"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					disabled
					theme="danger"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					disabled
					theme="warning"
				></pure-button>
				<pure-button
					class="button"
					text="内置主题"
					disabled
					theme="info"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 前置/后置图标 -->
		<app-demo-module title="前置/后置图标">
			<view class="buttons">
				<pure-button
					class="button"
					text="前置图标"
					iconName="__boda"
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="后置图标"
					afterIconName="__you2"
					theme="primary"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 加载状态 -->
		<app-demo-module title="加载状态">
			<view class="buttons">
				<pure-button
					class="button"
					text="加载状态"
					loading
					theme="success"
				></pure-button>
				<pure-button
					class="button"
					text="加载状态"
					loading
					loadingText="加载中..."
					theme="success"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 图标按钮 -->
		<app-demo-module
			title="图标按钮"
			:desc="[
				'不显示加载文本和按钮文本',
				'iconBtnSize 属性可以控制图标按钮大小',
			]"
		>
			<view class="buttons">
				<pure-button
					class="button"
					text="图标按钮"
					iconBtn
					iconName="__boda"
					theme="danger"
				></pure-button>
				<pure-button
					class="button"
					text="图标按钮"
					iconBtn
					iconName="__boda"
					loading
					theme="danger"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 圆形按钮 -->
		<app-demo-module
			title="圆形按钮"
			desc="一版结合图标按钮属性使用，将按钮设置为图标按钮类型后再设置为圆形按钮"
		>
			<view class="buttons">
				<pure-button
					class="button"
					text="图标按钮"
					iconBtn
					iconName="__boda"
					circle
					theme="warning"
				></pure-button>
				<pure-button
					class="button"
					text="图标按钮"
					iconBtn
					iconName="__boda"
					loading
					circle
					theme="warning"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 链接按钮 -->
		<app-demo-module title="链接按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="链接按钮"
					linkBtn
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="链接按钮"
					linkBtn
					prefixIconName="__zuo3"
					suffixIconName="__you3"
					theme="primary"
				></pure-button>
				<app-gap></app-gap>
				<pure-button
					class="button"
					text="下划线链接按钮"
					linkBtn
					underline
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="下划线链接按钮"
					linkBtn
					underline
					prefixIconName="__zuo3"
					suffixIconName="__you3"
					theme="primary"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 圆角按钮 -->
		<app-demo-module title="圆角按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="圆角按钮"
					round
					theme="success"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 矩形按钮 -->
		<app-demo-module title="矩形按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="矩形按钮"
					square
					theme="danger"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 块级按钮 -->
		<app-demo-module title="块级按钮">
			<view class="buttons">
				<pure-button
					class="button"
					text="块级按钮"
					block
					theme="warning"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 按钮尺寸 -->
		<app-demo-module title="按钮尺寸">
			<view class="buttons">
				<pure-button
					class="button"
					text="默认尺寸"
					theme="primary"
				></pure-button>
				<pure-button
					class="button"
					text="小号尺寸"
					size="mini"
					theme="primary"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 获取手机号 -->
		<app-demo-module title="打开授权设置">
			<view class="buttons">
				<pure-button
					class="button"
					text="打开授权设置"
					block
					theme="success"
					open-type="openSetting"
					@opensetting="handleOpenSetting"
				></pure-button>
			</view>
		</app-demo-module>

		<!-- 按钮防抖 -->
		<app-demo-module
			title="按钮防抖"
			:desc="[
				'默认开启了防抖功能',
				'默认防抖时间为 800ms',
				'默认无防抖提示',
			]"
		>
			<view class="buttons">
				<pure-button
					class="button"
					text="按钮防抖"
					theme="danger"
				></pure-button>
				<pure-button
					class="button"
					text="设置了防抖提示"
					theme="danger"
					tips="点击太快啦~"
				></pure-button>
			</view>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 打开授权设置
function handleOpenSetting(event) {
	console.log(event);
}
</script>

<style scoped lang="scss">
.page-layout {
	--app-theme-china-red: #ff0000;
}

.buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
}
</style>
